@import "../css/var.less";

canvas {
    display: block;
    
}

#txt{
	left: 50%;
	position: absolute;
	top: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 130px;
}

.login-reg{
    text-align: center;
    margin-top: 20px;
}
.login{
    height: 100%;
    overflow: hidden;
    
    a{
        color: #fff;
        list-style: none;
    }
    #logins{
        width: 540px;
        padding-bottom: 20px;
        background:rgba(255, 255, 255,0.2);
        position: absolute;
        top: 50%;
        margin-top: -277px;
        left: 55%;
        z-index: 10;
        display: none;
        .borderRadious(10px);
        .logins-top{
            width: 428px;
            margin: 50px auto 10px;
            position: relative;
            .logo{
                width: 263px;
            }
            span{
                color: #fff;
                position: absolute;
                right: 0;
                bottom: 10px;
                font-weight: bold;
                font-size: 18px;
            }
        }
        .logins-b{
            background: rgba(255, 255,255, 0.4);
            border-radius: 5px;
        }
        .logins-s{
            width: 428px;
            height: 48px;
            margin: 20px auto 0;
            line-height: 48px;
            img{
                margin-left: 10px;
                margin-right: 10px;
            }
            input{
                color: #fff;
                display: inline-block;
                width: 350px;
                background: transparent;
                height: 40px;
                outline:none;
                .placeholder(#fff,16px);
            }
            .scan{
                width: 246px;
                input{
                    width: 180px;
                }
            }
            .scans{
                width: 160px;
                height: 48px;
                overflow: hidden;
                img{
                    width: 160px;
                    height: 48px;
                    margin-left: 0px;
                    margin-right: 0px;
                    margin-top: -5px;
                    cursor: pointer;
                }
            }
        }
        .logins-ch{
            margin: 0 auto;
            padding-left: 20px;
            color: #046467;
            padding-right: 10px;
            font-size: 14px;
        }
        .el-checkbox{
            color: #fff;
        }
        .el-checkbox__inner{
            width: 22px;
            height: 22px;
            background: transparent;
            border-color:#fff;
            &::after{
                border: 1px solid #009ea3;
                border-left: 0;
                border-top: 0;
                height: 12px;
                left: 8px;
            }
        }
        .el-checkbox__label{
            color: #fff;
            margin-left: 9px;
        }
        .el-row{
            width: 100%;
        }
        .el-button{
            display: inline-block;
            width: 100%;
            height: 54px;
            .borderRadious(5px);
            background: #0e979b;
            font-size: 18px;
            color: #fff;
            border:none;
            text-align: center;
        }
    }
}
.el-message{
    top:40%;
}
#china{
    position: absolute;
    left: 5%;
    top: 50%;
    margin-top: -277px;
    display: none;
    width: 711px;
    height: 589px;
    opacity: 0.3;
    animation:fadeInDowns 2s infinite linear 0.2s  alternate forwards;
    img{
        position: absolute;
    }
    .xinjiang{
        left: -2px;
        top: 67px;
        animation:fadeInDown 4s infinite linear 0.2s  alternate forwards;
    }
    .xizang{
        top:270px;
        left: 30px;
        animation:fadeInDown 5s infinite linear 0.3s  alternate forwards;
    }
    .qinghai{
        left: 181px;
        top: 236px;
        animation:fadeInDown 6s infinite linear 0.4s  alternate forwards;
    }
    .gansu{
       left: 235px;
       top: 183px; 
       animation:fadeInDown 3s infinite linear 0.5s  alternate forwards;
    }
    .sichuan{
        left: 283px;
        top: 324px;
        animation:fadeInDown 6s infinite linear 0.6s  alternate forwards;
    }
    .yunnan{
        left: 278px;
        top: 409px;
        animation:fadeInDown 5s infinite linear 0.7s  alternate forwards;
    }
    .neimeng{
        top: 4px;
        left: 294px;
        animation:fadeInDown 4s infinite linear 0.8s  alternate forwards;
    }
    .ningxia{
        top: 241px;
        left: 375px;
        animation:fadeInDown 2.6s infinite linear 0.9s  alternate forwards;
    }
    .shanxi{
        left: 394px;
        top: 238px;
        animation:fadeInDown 3.6s infinite linear 1.0s  alternate forwards;
    }
    .shanxi2{
        left: 455px;
        top: 216px;
        animation:fadeInDown 4.5s infinite linear 1.1s  alternate forwards;
    }
    .chongqing{
        top: 359px;
        left: 394px;
        animation:fadeInDown 5.0s infinite linear 1.2s  alternate forwards;
    }
    .guizhou{
        top: 406px;
        left: 365px;
        animation:fadeInDown 5.3s infinite linear 1.3s  alternate forwards;
    }
    .guangxi{
        top: 451px;
        left: 379px;
        animation:fadeInDown 5.4s infinite linear 1.4s  alternate forwards;
    }
    .hebei{
        left: 494px;
        top: 180px;
        animation:fadeInDown 8.7s infinite linear 1.5s  alternate forwards;
    }
    .beijing{
        left: 509px;
        top: 206px;
        animation:fadeInDown 5.6s infinite linear 1.6s  alternate forwards;
    }
    .tianjin{
        left: 533px;
        top: 219px;
        animation:fadeInDown 2.6s infinite linear 1.7s  alternate forwards;
    }
    .heilongjiang{
        top: -3px;
        right: -3px;
        animation:fadeInDown 4.6s infinite linear 1.8s  alternate forwards;
    }
    .jilin{
        top: 110px;
        right: 12px;
        animation:fadeInDown 4.9s infinite linear 1.9s  alternate forwards;
    }
    .liaoning{
        right: 66px;
        top: 156px;
        animation:fadeInDown 8.6s infinite linear 2.0s  alternate forwards;
    }
    .shandong{
        top: 252px;
        right: 91px;
        animation:fadeInDown 4.0s infinite linear 1.9s  alternate forwards;
    }
    .henan{
        top: 284px;
        right: 163px;
        animation:fadeInDown 7.6s infinite linear 1.8s  alternate forwards;
    }
    .hubei{
        right: 162px;
        top: 341px;
        animation:fadeInDown 4.9s infinite linear 1.7s  alternate forwards;
    }
    .anhui{
        top: 311px;
        right: 116px;
        animation:fadeInDown 6.2s infinite linear 1.6s  alternate forwards;
    }
    .jiangsu{
        right: 82px;
        top: 300px;
        animation:fadeInDown 4.6s infinite linear 1.5s  alternate forwards;
    }
    .hunan{
        right: 185px;
        top: 392px;
        animation:fadeInDown 2.6s infinite linear 1.4s  alternate forwards;
    }
    .jiangxi{
        right: 127px;
        top: 387px;
        animation:fadeInDown 5.3s infinite linear 1.3s  alternate forwards;
    }
    .zhejiang{
        right: 78px;
        top: 363px;
        animation:fadeInDown 4.1s infinite linear 1.2s  alternate forwards;
    }
    .shanghai{
        right: 80px;
        top:350px;
        animation:fadeInDown 5.3s infinite linear 1.1s  alternate forwards;
    }
    .guangdong{
        right: 138px;
        top: 465px;
        animation:fadeInDown 5.1s infinite linear 1.0s  alternate forwards;
    }
    .fujian{
        right: 97px;
        top: 410px;
        animation:fadeInDown 2.9s infinite linear 0.9s  alternate forwards;
    }
    .hainan{
        bottom: -2px;
        right: 227px;
        animation:fadeInDown 2.7s infinite linear 0.8s  alternate forwards;
    }
    .taiwan{
        right: 69px;
        bottom: 71px;
        animation:fadeInDown 5.3s infinite linear 0.7s  alternate forwards;
    }
}
@keyframes fadeInDown 
{
    0% {opacity:0.2;}
    100% {opacity:1;}

}
@keyframes fadeInDowns{
    0%{
        -webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);
    }
    100%{
        -webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)
    }
}
@media only screen and (max-width: 1600px){
    #china{
        left: 0px;
    }
}